/* 全局样式重置 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Microsoft YaHei", sans-serif;
}

body {
  background: #f8f9fa;
  color: #495057;
}

/* 左侧导航栏 */
.left {
  width: 220px;
  background: #2f3b47;
  color: #fff;
  height: 100vh;
  position: fixed;
}
.left .head {
  padding: 20px;
  background: #2969a9;
}
.left .head h2 {
  font-size: 18px;
  font-weight: 600;
}
.left .content ul {
  list-style: none;
}
.left .content li {
  padding: 12px 20px;
  cursor: pointer;
  transition: background 0.3s;
}
.left .content li:hover {
  background: #3a4752;
}
.left .content li a {
  color: #fff;
  text-decoration: none;
  font-size: 14px;
}
.left .content li.active {
  background: #1f2b36;
  font-weight: 600;
}

/* 右侧主内容 */
.right {
  margin-left: 220px;
  padding: 20px;
}

/* 顶部筛选栏 */
.top {
  background: #fff;
  padding: 15px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}
.top .tool {
  display: flex;
  align-items: center;
  gap: 10px;
}
.top .tool label {
  font-size: 14px;
  color: #6c757d;
}
.top .tool select,
.top .tool input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
  width: 180px;
}
.top .tool input[type="text"]::placeholder {
  color: #adb5bd;
}
.top .tool button {
  padding: 6px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: opacity 0.3s;
}
.top .tool button:hover {
  opacity: 0.8;
}
.top .tool .search {
  background: #007bff;
  color: #fff;
}
.top .tool .add {
  background: #6f42c1;
  color: #fff;
}
.top .tool .batch-delete {
  background: #dc3545;
  color: #fff;
}
.top .tool .import {
  background: #28a745;
  color: #fff;
}
.top .tool .export {
  background: #ffc107;
  color: #fff;
}

/* 表格容器 */
.bottom {
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow-x: auto;
}

/* 数据表格 */
.bottom table {
  width: 100%;
  min-width: 800px;
  border-collapse: collapse;
}
.bottom thead {
  background: #f1f3f5;
}
.bottom th,
.bottom td {
  padding: 12px 10px;
  text-align: left;
  border-bottom: 1px solid #e9ecef;
  font-size: 14px;
}
.bottom tbody tr:hover {
  background: #f8f9fa;
}
.bottom td .operate {
  display: flex;
  gap: 8px;
}
.bottom td .operate a {
  text-decoration: none;
  color: #007bff;
  font-size: 14px;
  cursor: pointer;
  transition: color 0.3s;
}
.bottom td .operate a:hover {
  color: #0056b3;
}
.bottom td .operate .delete {
  color: #dc3545;
}
.bottom td .operate .delete:hover {
  color: #c82333;
}

/* 分页样式 */
.pagination {
  margin-top: 20px;
  text-align: right;
}
.pagination .step-links a {
  color: #007bff;
  text-decoration: none;
  margin: 0 5px;
  font-size: 14px;
}
.pagination .step-links span.current {
  color: #6c757d;
  margin: 0 5px;
  font-size: 14px;
}
.edit{
  color: green;
}


/* 调整容器，让内容居中，和目标效果里表格居中一致 */
.right .container {
    width: fit-content; /* 让容器宽度适配内容 */
    margin: 0 auto; /* 水平居中 */
}
/* 调整标题样式，让标题和表格更贴近目标的排版 */
.right .container h2 {
    text-align: center; /* 标题居中 */
    margin-bottom: 15px; /* 和表格拉开点距离 */
}
/* 调整表格单元格内边距、边框等，让表格更紧凑，接近目标样式 */
.table.table-bordered th,
.table.table-bordered td {
    padding: 8px 12px; /* 调整内边距，让内容不会太挤 */
    border: 1px solid #000; /* 确保边框是黑色实线，和目标表格边框一致 */
    text-align: left; /* 内容左对齐，符合目标样式 */
}